<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const { proxy } = getCurrentInstance();
const list = ref([])

const tableLabel = reactive([
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "age",
    label: "年龄",
  },
  {
    prop: "sexLabel",
    label: "性别",
  },
  {
    prop: "birth",
    label: "出生日期",
    width: 200,
  },
  {
    prop: "addr",
    label: "地址",
    width: 320,
  },
]);

const config = reactive({
  total: 0,
  page: 1,
  name:"",
})

async function getUserData(config) {
  let res = await proxy.$api.getUserData(config);
  // console.log(res)
  config.total = res.count;
  list.value = res.list.map((item) => {
    item.sexLabel = item.sex === 0 ? "女" : "男";
    return item;
  });
}

function changePage(page){
  console.log(page)
  config.page = page
  getUserData(config)
}

const formInline = reactive({
  keyword: "",
});

function handleSearch() {
  config.name = formInline.keyword;
  getUserData(config);
}

// 控制模态框的显示隐藏
const dialogVisible = ref(false)
function handleClose(done) {
  ElMessageBox.confirm('确认关闭？')
      .then(() => {
        proxy.$refs.userForm.resetFields();
        done()
      })
      .catch(() => {
        // catch error
      });
}
// 添加用户的form数据
const formUser = reactive({
  name:"", // 添加用户的用户名
  age: "",
  sex: "",
  birth: "",
  addr: "",
})

const timeFormat = (time) => {
  var time = new Date(time);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var date = time.getDate();
  function add(m) {
    return m < 10 ? "0" + m : m;
  }
  return year + "-" + add(month) + "-" + add(date);
};

// 添加用户
function onSubmit() {
  proxy.$refs.userForm.validate(async (valid) => {
    if (valid) {
      if (action.value === "add") {
        formUser.birth = timeFormat(formUser.birth);
        let res = await proxy.$api.addUser(formUser);
        if (res) {
          console.log(proxy.$refs)
          dialogVisible.value = false;
          proxy.$refs.userForm.resetFields();
          await getUserData(config);
        }
      } else {
        // 编辑的接口
        console.log(formUser)
        formUser.sex === "男" ? (formUser.sex = 1) : (formUser.sex = 0);
        let res = await proxy.$api.editUser(formUser);
        if (res) {
          dialogVisible.value = false;
          proxy.$refs.userForm.resetFields();
          await getUserData(config);
        }
      }
    } else {
      ElMessage({
        showClose: true,
        message: "请输入正确的内容",
        type: "error",
      });
    }
  })
}

// 取消
function handleCancel() {
  dialogVisible.value = false
  proxy.$refs.userForm.resetFields();
}

// 区分编辑和新增
const action = ref('add')
// 编辑用户
function handleEdit(row) {
  console.log(row)
  // 浅拷贝
  action.value = 'edit'
  dialogVisible.value = true
  row.sex === 1 ? (row.sex = "男") : (row.sex = "女");
  proxy.$nextTick(() => {
    Object.assign(formUser, row);
  })
}
// 新增用户
function handleAdd() {
  action.value = 'add'
  dialogVisible.value = true
}

// 删除用户
function handleDelete(row) {
  ElMessageBox.confirm("are you confirm?")
      .then(async () => {
        await proxy.$api.deleteUser({
          id: row.id,
        });

        ElMessage({
          showClose: true,
          message: "删除成功!",
          type: "success",
        });
        getUserData(config);
      }).catch(() => {
        // catch error
      });
}

onMounted(() => {
  getUserData(config)
})
</script>

<template>
  <div class="user-header">
    <el-button type="primary" @click="handleAdd">+add</el-button>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="input">
        <el-input v-model="formInline.keyword" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">Query</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="list" style="width: 100%" height="500px">
      <el-table-column
          v-for="item in tableLabel"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :width="item.width ? item.width : 125"
      />
      <el-table-column fixed="right" label="操作" min-width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="config.total"
        @current-change="changePage"
        class="pager mt-4"
    />
  </div>
  <el-dialog
    v-model="dialogVisible"
    :title="action === 'add' ? '新增用户' : '编辑用户'"
    width="35%"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="formUser" ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="姓名"
            prop="name"
            :rules="[{ required: true, message: '姓名是必填项' }]"
          >
            <el-input v-model="formUser.name" placeholder="input name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="年龄"
              prop="age"
              :rules="[
                  { required: true, message: '年龄是必填项' },
                  { type: 'number', message: '年龄必须为数字值' }
                  ]"
          >
            <el-input v-model.number="formUser.age" placeholder="input age" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="性别"
              prop="sex"
              :rules="[{ required: true, message: '性别是必填项' }]"
          >
            <el-select v-model="formUser.sex" placeholder="please select">
              <el-option label="男" value="0" />
              <el-option label="女" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
              label="出生日期"
              prop="birth"
              :rules="[{ required: true, message: '年龄是必填项' }]"
          >
            <el-date-picker
              v-model="formUser.birth"
              type="date"
              label="出生日期"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-form-item
              label="地址"
              prop="addr"
              :rules="[{ required: true, message: '地址是必填项' }]"
          >
            <el-input v-model="formUser.addr" placeholder="input addr" />
          </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<style lang="less" scoped>
.table {
  position: relative;
  height: 520px;
  .pager {
    position: absolute;
    right: 0;
    bottom: -20px;
  }
}
.user-header {
  display: flex;
  justify-content: space-between;
}
</style>